<template>
	<div class="page-wrapper">
		<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
			<el-form-item>
				<el-input v-model="state.queryForm.ip" placeholder="输入ip查询" clearable style="width: 150px;" maxlength="140"></el-input>
			</el-form-item>
			<el-form-item>
				<el-input v-model="state.queryForm.referer" placeholder="输入浏览器地址查询" clearable style="width: 150px;" maxlength="140"></el-input>
			</el-form-item>
			<el-form-item>
				<el-input v-model="state.queryForm.user_agent" placeholder="输入浏览器信息查询" clearable style="width: 150px;" maxlength="140"></el-input>
			</el-form-item>
			<el-form-item>
				<el-input v-model="state.queryForm.client_type" placeholder="输入登录端查询" clearable style="width: 150px;" maxlength="140"></el-input>
			</el-form-item>
			<el-form-item>
                <el-select
                    v-model="state.queryForm.login_result"
                    filterable
                    clearable
                    placeholder="登录状态查询"
                    style="width: 150px"
                >
                    <el-option label="登录成功" :value="1" />
                    <el-option label="登录失败" :value="0" />
                </el-select>
			</el-form-item>
			<el-form-item>
				<el-input v-model="state.queryForm.failed_reason" placeholder="输入失败原因查询" clearable style="width: 150px;" maxlength="140"></el-input>
			</el-form-item>
			<el-form-item>
				<el-input v-model="state.queryForm.failed_account" placeholder="输入失败账号数查询" clearable style="width: 150px;" maxlength="140"></el-input>
			</el-form-item>
			<el-form-item>
                <el-select
                    v-model="state.queryForm.strator_id"
                    filterable
                    clearable
                    placeholder="根据人员查询"
                    style="width: 150px"
                >
                    <el-option
                    v-for="item in userList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    />
                </el-select>
			</el-form-item>
			<el-form-item>
				<el-button @click="getDataList()" type="primary">查询</el-button>
			</el-form-item>
			<el-form-item>
				<el-button @click="clearForm()">重置</el-button>
			</el-form-item>
			<!-- <el-form-item>
				<el-button type="danger" @click="deleteBatchHandle()">删除</el-button>
			</el-form-item> -->
		</el-form>
		<el-table v-loading="state.dataListLoading" :data="state.dataList" border style="width: 100%" width="100%" height="100%">
            <!-- @selection-change="selectionChangeHandle"  -->
			<!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> -->
			<el-table-column prop="id" label="序号" header-align="center" align="center" width="80"></el-table-column>
			<el-table-column prop="client_type" label="登录端" header-align="center" align="center" width="100"></el-table-column>
			<el-table-column prop="created_at" label="登录时间" header-align="center" align="center" width="180"></el-table-column>
			<el-table-column prop="ip" label="ip" header-align="center" align="center" width="180"></el-table-column>
			<el-table-column prop="referer" label="浏览器地址" header-align="center" align="center"></el-table-column>
			<el-table-column prop="user_agent" label="浏览器信息" header-align="center" align="center" show-overflow-tooltip></el-table-column>
			<el-table-column prop="strator.strator_nickname" label="登录人员" header-align="center" align="center"></el-table-column>
			<el-table-column prop="login_result" label="登录结果" header-align="center" align="center">
                <template #default="scope">
				    <div v-if="scope.row.login_result == 1">登录成功</div>
				    <div v-else class="textL pl30">
                        <div>登录失败</div>
                        <div>失败原因：{{ scope.row.failed_reason }}</div>
                        <div>登录账号：{{ scope.row.failed_account }}</div>
                        <div>登录密码：{{ scope.row.failed_password }}</div>
                    </div>
				</template>
            </el-table-column>
			<!-- <el-table-column label="操作" fixed="right" header-align="center" align="right" width="200">
				<template #default="scope">
					<el-button type="primary" link @click="addOrUpdateHandle(scope.row.id, true)" v-if="hasRule('system/role/index/setrole')">设置权限</el-button>
					<el-button type="primary" link @click="addOrUpdateHandle(scope.row.id)" v-if="hasRule('system/role/index/update')">修改</el-button>
					<el-button type="danger" link @click="deleteHandle(scope.row.id)" v-if="hasRule('system/role/index/delete')">删除</el-button>
				</template>
			</el-table-column> -->
		</el-table>
		<el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.per_page"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>
	</div>
</template>

<script setup lang="ts">
import { useCrud } from '@/hooks'
import { reactive, ref, onMounted } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import { hasRule } from '@/utils/tool'
import { useUserListApi } from '@/api/user'

const state: IHooksOptions = reactive({
	dataListUrl: '/api/strator/login/log/list',
	deleteUrl: '/api/strator/login/log/delete',
    isPage: true,
	queryForm: {
        strator_id: '',
        ip: '',
        referer: '',
        user_agent: '',
        client_type: '',
        login_result: '',
        failed_reason: '',
        failed_account: '',
	}
})
const userList = ref([]);
const clearForm = () => {
    state.queryForm.strator_id = '';
    state.queryForm.ip = '';
    state.queryForm.referer = '';
    state.queryForm.user_agent = '';
    state.queryForm.client_type = '';
    state.queryForm.login_result = '';
    state.queryForm.failed_reason = '';
    state.queryForm.failed_account = '';
    getDataList();
}
const addOrUpdateRef = ref()
const addOrUpdateHandle = (id?: number, isRole?: any) => {
	addOrUpdateRef.value.init(id, isRole)
}
onMounted(() => {
    useUserListApi({
        page: 1,
        per_page: 9999
    }).then((result) => {
        userList.value = result.data.data.map(item => {
            return {
                value: item.id,
                label: item.strator_nickname || item.strator_account
            }
        });
    }).catch((err) => {
        
    });
})

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteHandle } = useCrud(state)
</script>
